<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="shortcut icon" href="images/travelling.ico">
    <link rel="stylesheet" href="bs4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="javascripts/jquery-3.4.1.min.js"></script>
    <script src="bs4.0/js/bootstrap.js"></script>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=0f641d0774a54449dc97426027c129f4"></script>
    <script src="javascripts/index.js"></script>
    <style>
        .carousel-item {
            height: 25em;
        }
    </style>
</head>

<body>
    <div id="head"></div>
    <!-- 轮播图 -->
    <div id="circleContent" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#circleContent" data-slide-to="0" class="active"></li>
            <li data-target="#circleContent" data-slide-to="1"></li>
            <li data-target="#circleContent" data-slide-to="2"></li>
            <li data-target="#circleContent" data-slide-to="3"></li>
            <li data-target="#circleContent" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active"
                style="height: 25em;background: url(images/bgPic/indexPic1.jpg) no-repeat center center">
                <img class="d-block w-100" src="">
            </div>
            <div class="carousel-item"
                style="height: 25em;background: url(images/bgPic/indexPic2.jpg) no-repeat center center">
                <img class="d-block w-100" src="">
            </div>
            <div class="carousel-item"
                style="height: 25em;background: url(images/bgPic/indexPic3.jpg) no-repeat center center">
                <img class="d-block w-100" src="">
            </div>
            <div class="carousel-item"
                style="height: 25em;background: url(images/bgPic/indexPic4.jpg) no-repeat center center">
                <img class="d-block w-100" src="">
            </div>
            <div class="carousel-item"
                style="height: 25em;background: url(images/bgPic/indexPic5.jpg) no-repeat center center">
                <img class="d-block w-100" src="">
            </div>
        </div>
        <a class="carousel-control-prev" href="#circleContent" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#circleContent" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="container scrollspy-example mt-5" data-spy="scroll" data-target="#list-example" data-offset="0">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3">
                <div class="card border-white" id="leftCard">
                    <div class="card-header">热门景点推荐</div>
                    <div id="littleCircle" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#littleCircle" data-slide-to="0" class="active"></li>
                            <li data-target="#littleCircle" data-slide-to="1"></li>
                            <li data-target="#littleCircle" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="images/scenerySpot/suMuseum.jpeg">
                                <div class="carousel-caption w-75">
                                    <h5 class="text-dark">苏州博物馆</h5>
                                    <p class="text-dark">·传统的苏州园林风格，高低错落，深灰色屋面与白墙相衬，整个博物馆宛若一座小园林。</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="images/scenerySpot/shanTang.jpeg">
                                <div class="carousel-caption w-75">
                                    <h5 class="text-dark">七里山塘</h5>
                                    <p class="text-dark">东连“红尘中一、二等富贵风流之地”阊门，西接“吴中第一名胜”虎丘，长约七里。</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="images/scenerySpot/tongLi.jpeg">
                                <div class="carousel-caption w-75">
                                    <h5 class="text-dark">同里古镇</h5>
                                    <p class="text-dark">·江南六同里古镇是大古镇之一，始建于宋代，至今已有1000多年历史。<p>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#littleCircle" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#littleCircle" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <!-- <div class="card">
                    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title that wraps to a new line</h5>
                        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                            additional content. This content is a little bit longer.</p>
                    </div>
                </div> -->
            </div>
            <!-- 中间部分 -->
            <div class="col-md-8">

                <ul class="list-unstyled">
                    <li class="media">
                        <img class="mr-3" src="images/scenerySpot/suMuseum.jpeg" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">原汁原味的才是正宗，游江南还得去苏州这里</h5>
                            <p class="mt-3">苏州 ，简称“苏”，古称吴、姑苏、 平江 府，也是很多游客回来这里观光的地方，来体验真正的 江南 好风情。</p>
                        </div>
                    </li>
                    <li class="media my-4">
                        <img class="mr-3" src="images/scenerySpot/shanTang.jpeg" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">List-based media object</h5>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                            Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                            ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3" src="images/scenerySpot/pingJiang.jpeg" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">List-based media object</h5>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
                            Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
                            ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                        </div>
                    </li>
                </ul>

                <h4 id="list-item-2">热门景点攻略推荐</h4>
                <a href="view.html">更多&gt;</a>
                <div class="card-deck d-flex flex-column">
                    <div class="card d-flex flex-row">
                        <img class="card-img-top" src="images/scenerySpot/suMuseum.jpeg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">苏州博物馆</h5>
                            <p class="card-text">·传统的苏州园林风格，高低错落，深灰色屋面与白墙相衬，整个博物馆宛若一座小园林。<p>
                        </div>
                    </div>
                    <div class="card d-flex flex-row">
                        <img class="card-img-top" src="images/scenerySpot/tongLi.jpeg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">同里古镇</h5>
                            <p class="card-text">·江南六同里古镇是大古镇之一，始建于宋代，至今已有1000多年历史。<p>
                        </div>
                    </div>
                    <div class="card d-flex flex-row">
                        <img class="card-img-top" src="images/scenerySpot/shanTang.jpeg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">七里山塘</h5>
                            <p class="card-text">东连“红尘中一、二等富贵风流之地”阊门，西接“吴中第一名胜”虎丘，长约七里。</p>
                        </div>
                    </div>
                </div>
                <h4 id="list-item-3">热门美食攻略推荐</h4>
                <a href="deliousfood.html">更多&gt;</a>
                <div class="card-deck">
                    <div class="card">
                        <img class="card-img-top" src="images/food/songhe.png" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">松鹤楼</h5>
                            <p class="card-text">·松鹤楼是老字号的苏州菜馆，创建于清乾隆二十二年(1757年)。</p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="images/food/deyue.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">得月楼</h5>
                            <p class="card-text">·得月楼是苏州菜传统老店，老电影《小小得月楼》就是以此为背景创造的。<br></p>
                        </div>
                    </div>
                    <div class="card">
                        <img class="card-img-top" src="images/food/shengjian.jpg" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">哑巴生煎</h5>
                            <p class="card-text">·被称作全苏州最好吃的生煎，主营甜口生煎。<br></p>
                        </div>
                    </div>
                </div>
                <h4 id="list-item-4">热门个性路线推荐</h4>
                <a href="line.html">更多&gt;</a>
                <div class="accordion" id="accordionExample">
                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    苏州经典一日游&nbsp;&nbsp;&nbsp;&nbsp;最佳季节：3月-5月
                                </button>
                            </h5>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                            data-parent="#accordionExample">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-4">
                                        <p>路线概览<br />
                                            D1拙政园(2小时) → 苏州博物馆(2小时) → 平江路(1小时) → 金鸡湖景区(2小时)</p>
                                    </div>
                                    <div class="col-8 card-body" id="map01" style="height: 20rem;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <h5 class="mb-0">
                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                    data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    苏州经典二日游&nbsp;&nbsp;&nbsp;&nbsp;最佳季节：3月-5月
                                    <button class="btn" onclick="day01()">day01</button>
                                    <button class="btn" onclick="day02()">day02</button>
                                </button>
                            </h5>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                            data-parent="#accordionExample">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-4">
                                        <p>路线概览<br />
                                            D1拙政园(2小时) → 苏州博物馆(2小时) → 平江路(1小时) → 金鸡湖景区(2小时)<br />
                                            D2寒山寺(1小时) → 虎丘山风景区(3小时) → 七里山塘(2小时) → 山塘昆曲馆(2小时)
                                        </p>
                                    </div>
                                    <div class="col-8 card-body" id="map02" style="height: 20rem;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </nav>
            </div>
            <!-- 页面导航 -->
            <div class="col-md-1">
                <div class="list-group position-fixed text-center" style="width: 4em;">
                    <a class="list-group-item list-group-item-action" href="#head"><i class="fa fa-chevron-up"
                            aria-hidden="true"></i></a>
                    <a class="list-group-item list-group-item-action" href="#list-item-2">景点</a>
                    <a class="list-group-item list-group-item-action" href="#list-item-3">美食</a>
                    <a class="list-group-item list-group-item-action" href="#list-item-4">路线</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="foot"></div>
</body>

</html>